<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱华仕登录页面</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987357_gcyfazmwjx.css">
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../css/login/login.css">


    <style>
        .xctips {

            position: fixed;
            margin-top: 20px;
            left: 50%;
            margin-left: -190px;
            width: 380px;
            height: 44px;
            border-radius: 5px;
            z-index: 999;
            color: #f56c6c;
            background-color: #fef0f0;
            border: #f56c6c 1px solid;
            line-height: 44px;
            text-align: center;
            vertical-align: middle;
            font-size: 16px;
            transition: background .2s linear;
            -webkit-transition: background .2s linear;

        }

        .igreen {
            background-color: rgb(51, 204, 51) !important;
            color: #fff !important;
            border: 0 !important;
        }
    </style>
</head>

<body>
    <div class="oiwas_layout">

        <header>
            <div class="marquee">
                <div class="marqueeCon w">

                    <div class="mar_left">
                        <em class="iconfont icon-laba"></em>
                        <span>最新公告：</span>
                    </div>

                    <div id="scroll_div" class="fl">
                        <div id="scroll_begin">
                            注册得200元礼遇，先到先得！
                        </div>
                        <div id="scroll_end"></div>
                    </div>


                    <div class="mar_right">
                        <img src=""
                            alt="">
                    </div>


                </div>
            </div>
            <div class="main">
                <div class="nav w">
                    <h1>
                        <a href="">
                            <img src="	http://api.oiwas.com/upload/admin_upload/20210607/f7de14d1306faeac77ac89b339c47380.png"
                                alt="">
                            <span class="fans">粉丝数：36.8万</span>
                        </a>
                    </h1>

                    <div class="nav_right">
                        <div class="search">
                            <input type="text">
                            <em class="iconfont icon-fangdajing"></em>
                        </div>

                        <div class="nav_font">
                            <a href="">在线客服</a>
                            <a href="">查找店铺</a>
                            <a href="">登录</a>
                            <a href="">
                                <em class="iconfont icon-gouwudai"></em>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column ">
                    <ul class="w nav_list">
                        <li>
                            <span>首页</span>

                        </li>

                        <li>
                            <span>拉杆箱</span>
                            <ul class="hover_nav_list">
                                <li><a href="">商场同款</a></li>
                                <li><a href="">休闲通勤</a></li>
                                <li><a href="">可乐联名</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>史努比</span>
                        </li>

                        <li>
                            <span>双肩包</span>
                            <ul class="hover_nav_list">
                                <li><a href="">商务背包</a></li>
                                <li><a href="">休闲背包</a></li>
                                <li><a href="">可乐联名</a></li>
                                <li><a href="">KiM潮牌</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>象象包</span>

                        </li>

                        <li>
                            <span>快乐象家庭</span>
                            <ul class="hover_nav_list">
                                <li><a href="">时尚妈咪包</a></li>
                                <li><a href="">Q萌童包</a></li>
                            </ul>
                        </li>

                        <li>
                            <span>新品专区</span>
                        </li>

                        <li>
                            <span>品牌故事</span>
                        </li>

                        <li>
                            <span>爱华仕大广赛</span>
                        </li>

                        <li>
                            <span>招商加盟</span>
                            <ul class="hover_nav_list">
                                <li><a href="">分销招商</a></li>
                                <li><a href="">礼品合作</a></li>
                                <li><a href="">百货加盟</a></li>
                                <li><a href="">售后服务</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="page">
            <div class="warp">
                <div class="logincontent">
                    <div class="logintitle">
                        <h2 class="active" id="phone">手机号验证登录</h2>
                        <h2 class="" id="code">账号密码登录</h2>
                    </div>

                    <div class="loginval">
                        <div class="phone_num">
                            <input type="text" placeholder="手机" class="meizuo">
                        </div>

                        <div class="rand_code">
                            <input type="text" placeholder="验证码" class="meizuo">
                            <div class="code">
                                1256
                            </div>
                        </div>

                        <div class="icon">
                            <i class="" id="remeber"></i>
                            <span>记住我的信息</span>
                        </div>

                        <div class="btn">
                            登录<span>→</span>
                        </div>

                        <a href="" class="forget">忘记密码</a>
                        <a href="./reg.html" class="reg">注册</a>
                    </div>

                    <div class="loginTab" style="display: none;">
                        <div class="phone_num">
                            <input type="text" placeholder="用户名" class="username">
                        </div>

                        <div class="rand_code">
                            <input type="text" placeholder="登录密码" class="password">
                        </div>

                        <div class="icon">
                            <i class="" id="sremeber"></i>
                            <span>记住我的信息</span>
                        </div>

                        <div class="btn" id="oBtn">
                            登录<span>→</span>
                        </div>

                        <a href="" class="forget">忘记密码</a>
                        <a href="" class="reg">注册</a>
                    </div>

                    <div class="thridlogin">
                        <p class="thirdTit">
                            使用其他方式登录
                        </p>

                        <ul class="listInline">
                            <li>
                                <a href="">
                                    <img src="../image/02.png" alt="">
                                </a>
                            </li>

                            <li>
                                <a href="">
                                    <img src="../image/03.png" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="v" onclick="xcsoft.info('请填写你的相关信息哟',3000)">
            </div>

        </div>

        <div class="footer">

            <div class="addren">
                <div class="w">
                    <ul>
                        <li>联系我们</li>
                        <li>热线电话：400-887-3868</li>
                        <li>总机：0752-7832299</li>
                        <li>地址：广东省惠州市惠城区演达大道花边岭南花园1-3F</li>
                    </ul>
                </div>
            </div>

            <div class="fot_list">
                <div class="list_top w">
                    <ul class="nav">
                        <li>
                            <dl>
                                <dt>产品目录</dt>

                                <dd>拉杆箱</a></dd>
                                <dd>史努比</a></dd>
                                <dd>双肩包</a></dd>
                                <dd>象象包</a></dd>
                                <dd>快乐象家庭</a></dd>
                                <dd>新品专区</a></dd>
                                <dd>爱华仕大广赛</a></dd>
                                <dd>招商加盟</a></dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>招商加盟</dt>

                                <dd>分销招商</dd>
                                <dd>礼品合作</dd>
                                <dd>百货加盟</dd>
                                <dd>售后服务</dd>
                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>关于爱华仕</dt>
                                <dd>品牌故事</dd>
                                <dd>企业介绍</dd>
                                <dd>查找门店</dd>
                                <dd>意见反馈</dd>

                            </dl>
                        </li>


                        <li>
                            <dl>
                                <dt>我的账号</dt>
                                <dd>订单列表</dd>
                                <dd>账户资料</dd>
                                <dd>我的购物车</dd>
                            </dl>
                        </li>



                        <li>
                            <dl>
                                <dt>友情链接</dt>
                                <dd>天猫爱华仕旗舰店</dd>
                                <dd>爱华仕京东自营旗舰店</dd>
                                <dd>爱华仕官方旗舰店</dd>
                                <dd>爱华仕女包京东旗舰店</dd>
                            </dl>
                        </li>
                    </ul>

                    <div class="contact">
                        <ul>
                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/0ab234e.jpg" alt="">
                                <p>微博自媒体</p>
                            </li>

                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/1da4f69.jpg" alt="">
                                <p>微信公众号</p>
                            </li>


                            <li>
                                <img src="http://www.oiwas.com/_nuxt/img/252623a.jpg" alt="">
                                <p>微信小程序</p>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="list_btm">
                    <div class="w">

                        <div class="second_five">
                            <em class="iconfont icon-zhongguo"></em>
                            <span class="zh">
                                中国
                            </span>

                            <ul>
                                <li>隐私声明</li>
                                <li>|</li>
                                <li>使用条款</li>
                                <li>|</li>
                                <li>网站地图</li>
                            </ul>

                        </div>

                        <a href="">
                            Copyright @ 2007-2017 OIWS.All rights reserved. 粤ICP备17107696号
                        </a>
                    </div>
                </div>
            </div>

            <a href="javascript:;" class="pos_a" id="goback">
                <em class="iconfont icon-shangyi"></em>
            </a>
        </div>

    </div>


    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/api.js"></script>
    <script>

        // 轮播图
        const b = new Banner('.banner');
        b.autoPlay()
        b.init()

        // 返回顶部
        retrun_top()

        // 公告栏
        ScrollImgLeft();


        // 点击切换手机号登录或账号密码登录
        $('#code').on('click', function () {
            if ($(this).prev().hasClass('active')) {
                $(this).prev().removeClass('active')
                $(this).addClass('active');
                $(this).parent().siblings('.loginval').css('display', 'none');
                $(this).parent().siblings('.loginTab').css('display', 'block');
                $('#remeber').removeClass('iactive')

            }
        })

        $('#phone').on('click', function () {
            if ($(this).next().hasClass('active')) {
                $(this).next().removeClass('active')
                $(this).addClass('active');
                $(this).parent().siblings('.loginval').css('display', 'block');
                $(this).parent().siblings('.loginTab').css('display', 'none')
                $('#sremeber').removeClass('iactive')

            }
        })


        $('#remeber').on('click', function () {
            if ($(this).hasClass('iactive')) {
                $(this).removeClass('iactive')
            } else {
                $(this).addClass('iactive')
            }
        })


        $('#sremeber').on('click', function () {
            if ($(this).hasClass('iactive')) {
                $(this).removeClass('iactive')
            } else {
                $(this).addClass('iactive')
            }
        })


        // 没做提示
        $('.meizuo').on('input', function () {
            xcsoft.info('没有手机号，没做', 3000)
        })







        $('#oBtn').on('click', function () {
            console.log(1);

            let flag1, flag2 = false;

            $('.username').on('input', function () {

                const username = $('.username').val()

                if (username === '') {
                    xcsoft.info('用户名不能为空', 3000)
                    flag1 = false
                    return
                }

            });

            flag1 = true;





            $(".password").on("input", function () {
                const password = $('.password').val()

                if (password === '') {
                    xcsoft.info('密码不能为空', 3000)
                    flag2 = false
                    return
                }

            });

            flag2 = true;





            if (flag1 && flag2) {

                const username = $('.username').val();
                const password = $('.password').val();


                getAjaxData()

                async function getAjaxData() {

                    const res = await login({

                        username,
                        password

                    });

                    if (res.status) {

                        localStorage.setItem('login_user', username);
                        location.href = './index_owias.html'

                    } else {
                        alert(res.msg)
                    }

                }

            }
        })


        // 账号密码登录验证
        $(".username").on("input", function () {

            const username = $('.username').val()
            console.log(username);

            if (username === '') {
                xcsoft.info('用户名不能为空', 3000)
                flag1 = false
                return
            }
            flag1 = true

        });

        $(".password").on("input", function () {
            const password = $('.password').val()
            console.log(password);

            if (password === '') {
                xcsoft.info('密码不能为空', 3000)
                flag2 = false
                return
            }
            flag2 = true
        });



    </script>
</body>

</html>